

<template>
  <el-drawer v-model="isDrawerVisible" title="歌曲详情" :with-header="true">
	  <!-- <el-button v-if="!isEditing" type="primary" @click="isEditing = true">编辑</el-button> -->
    <el-form ref="form" :model="music" label-width="80px">
      <el-descriptions direction="vertical" :column="1" border>
		    <el-descriptions-item label="编号">{{ music.music_id }}</el-descriptions-item>
		  <el-descriptions-item label="歌名(可修改)">
		    <el-input v-model="music.music_name" v-if="isEditing"></el-input>
		    <span v-else>{{ music.music_name }}</span>
		  </el-descriptions-item>
		  <el-descriptions-item label="歌手(可修改)">
		    <el-input v-model="music.music_author" v-if="isEditing"></el-input>
		    <span v-else>{{ music.music_author }}</span>
		  </el-descriptions-item>
		  <el-descriptions-item label="类别(可修改)">
			  <el-select v-model="music.music_type" v-if="isEditing" placeholder="请选择" clearable>
			    <el-option label="华语" value="1" />
			    <el-option label="日韩" value="2" />
				<el-option label="欧美" value="3" />
				<el-option label="其他" value="4" />
				<el-option label="纯音乐" value="5" />
			  </el-select>
		    <span v-else>{{ music.music_type===1?'华语':music.music_type===2?'日韩':music.music_type===3?'欧美':music.music_type===5?'纯音乐':'其他' }}</span>
		  </el-descriptions-item>
		  <el-descriptions-item label="等级(可修改)">
		    <el-select v-model="music.music_level" v-if="isEditing">	
			<el-option label="认证" value="1" />
			<el-option label="公开" value="2" />
			</el-select>
		    <span v-else>{{ music.music_level===1?'认证':'公开' }}</span>
		  </el-descriptions-item>
		  <el-descriptions-item label="是否热门(可修改)">
		    <el-select v-model="music.music_rm" v-if="isEditing">
				<el-option label="热门" value="1" />
				<el-option label="常规" value="2" />
			</el-select>
		    <span v-else>{{ music.music_rm===1?'热门':'常规' }}</span>
		  </el-descriptions-item>
		  <el-descriptions-item label="状态(可修改)">
		    <el-select  v-model="music.music_state" v-if="isEditing">
				<el-option label="发布" value="1" />
				<el-option label="违规" value="2" />
				<el-option label="待审核" value="3" />
			</el-select>
		    <span v-else>{{ music.music_state===1?'发布':music.music_state===2?'违规':'待审核' }}</span>
		  </el-descriptions-item>
		  <el-descriptions-item label="歌词">{{music.music_gc}}</el-descriptions-item>
		<el-descriptions-item label="发布时间">{{music.music_date}}</el-descriptions-item>
		<el-descriptions-item label="发帖时间">{{music.music_time}}</el-descriptions-item>
		<el-descriptions-item label="发帖人">{{music.music_user_name}}</el-descriptions-item>
		<el-descriptions-item label="点赞数">{{music.music_tu}}</el-descriptions-item>
		<el-descriptions-item label="收藏数">{{music.music_sc}}</el-descriptions-item>
		<el-descriptions-item label="文件名">{{music.music_file}}</el-descriptions-item>
		<el-descriptions-item label="链接">{{music.music_url}}</el-descriptions-item>
		<el-descriptions-item label="封面">
		  <el-image
		    style="width: 200px; height: 200px; border-radius: 10px;"
		    :src="'/api/src/musics/image/'+music.music_img"
		    :preview-src-list="['/api/src/musics/image/'+music.music_img]"
		    fit="cover"
		  >
		  </el-image>
		</el-descriptions-item>
      </el-descriptions>
      
      <!-- 操作按钮 -->
      <div style="text-align: right; margin-top: 20px;">
        <el-button v-if="!isEditing" :icon="Edit" circle size="large"  type="primary" @click="isEditing = true"></el-button>
		<el-button v-if="!isEditing" type="primary" @click="isDrawerVisible = false">关闭</el-button>
        <el-button v-if="isEditing" type="success" @click="submitUpdate()">保存</el-button>
        <el-button v-if="isEditing" @click="cancelEdit()">取消</el-button>
      </div>
    </el-form>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';
import {
	  Edit,
	} from '@element-plus/icons-vue'
const emits = defineEmits(["flushPage"]);

const isDrawerVisible = ref(false);
const isEditing = ref(false);
const originalMusic = ref({
	music_id:null,
	music_name:'',
	music_file:'',
	music_gc:'',
	music_author:'',
	music_type:null,
	music_tu:null,
	music_sc:null,
	music_url:'',
	music_level:null,
	music_state:null,
	music_img:'',
	music_date:'',
	music_time:'',
	music_user_name:'',
	music_rm:null,
}); // 用于取到的行数据，以便取消编辑时可以恢复

//用于存储修改之后的数据，传到后端
const music = ref({
 music_id:null,
 music_name:'',
 music_file:'',
 music_gc:'',
 music_author:'',
 music_type:null,
 music_tu:null,
 music_sc:null,
 music_url:'',
 music_level:null,
 music_state:null,
 music_img:'',
 music_date:'',
 music_time:'',
 music_user_name:'',
 music_rm:null,
});

const handleDetailData = (obj) => {
  isDrawerVisible.value = true;
  // 使用展开运算符创建一个新的对象引用，避免直接修改原始数据
  originalMusic.value = Object.assign({},obj);
  music.value = Object.assign({},obj);
}


const submitUpdate = () => {
  axios({
  	url:'/api/music',
  	method:'Put',
  	params:Object.assign({},music.value)
  }).then( response => {
  	if(response.data === true){
  		ElMessage.success("更新成功！");
  		emits("flushPage");	
  	}else{
  		ElMessage.error("操作失败！");
  	}
  });
 
  isEditing.value = false;
}
//取消编辑：恢复原始数据
const cancelEdit = () => {
  music.value = Object.assign({},originalMusic.value); // 恢复原始数据
  isEditing.value = false;
}
// 将handleDetailData暴露给父组件
defineExpose({
  handleDetailData
})
</script>

<style scoped>
/* 样式 */
</style>